<!-- 智能仓储 -->
<template>
  <div class="mes-container">
    <div class="containerBox">
      <canvas id="canvas" style="position: absolute;top: 0;left: 0;"></canvas>
      <!-- 头部 -->
      <all-title ref="allTitle" :comp-info="compInfo" :title-name="titleName" />
      <div class="contentBox">
        <div class="leftBox fl">
          <div class="leftBg allBox">
            <h1>
              <i class="iconfont icon-wuliaoguanli" />物料参数
            </h1>
            <div class="leftTopBox">
              <ul>
                <li>
                  <span>
                    <i class="iconfont icon-shebeishuju" />物料名称:
                  </span>
                  <b>{{obj.materialName}}</b>
                </li>
                <li>
                  <span>
                    <i class="iconfont icon-shebeishuju" />物料数量:
                  </span>
                  <b>{{obj.wmsNum}}</b>
                </li>
                <li>
                  <span>
                    <i class="iconfont icon-shebeishuju" />物料单位:
                  </span>
                  <b>{{obj.unit}}</b>
                </li>
                <li>
                  <span>
                    <i class="iconfont icon-shebeishuju" />物料规格:
                  </span>
                  <b>{{obj.specifications}}</b>
                </li>
                <li>
                  <span>
                    <i class="iconfont icon-shebeishuju" />物料类型:
                  </span>
                  <b>{{obj.classifyName}}</b>
                </li>
              </ul>
            </div>
            <div class="leftBottomEcharts">
              <h2>
                <i class="iconfont icon-kufangguanli" />库位数据
              </h2>
              <left-echarts ref="leftEcharts" />
            </div>
          </div>
        </div>
        <div class="centerBox fl">
          <div class="centerTop">
            <div class="allBox centerTopBg">
              <div class="centerTopTitle">
                <span>仓库：{{wmsName || ''}}</span>
                <ul>
                  <li>
                    <span class="blue">
                      <i class="iconfont icon-kufangguanli"></i>
                    </span>
                    <b>满仓</b>
                  </li>
                  <li>
                    <span class="green">
                      <i class="iconfont icon-kufangguanli"></i>
                    </span>
                    <b>未满</b>
                  </li>
                  <li>
                    <span class="yellow">
                      <i class="iconfont icon-kufangguanli"></i>
                    </span>
                    <b>异常</b>
                  </li>
                </ul>
              </div>
              <center-top-echarts ref="centerTopEcharts" />
            </div>
          </div>
          <div class="centerBottom">
            <div class="allBox centerBottomBg">
              <h2 style="text-align:center;">
                <i class="iconfont icon-invoice-manage" />消防情况
              </h2>
              <right-echarts-gauge ref="rightEchartsGauge" />
            </div>
          </div>
        </div>
        <div class="rightBox fl">
          <div class="rightBg allBox">
            <h1>
              <i class="iconfont icon-renyuan" />安防监控
            </h1>
            <div class="rightTop">
              <h2>
                <i class="iconfont icon-invoice-manage" />仓库监控/仓库热成像
              </h2>
              <div class="rightTopContent">
                <img src="../../../assets/images/jk.png" />
                <img src="../../../assets/images/rcx.png" />
              </div>
            </div>
            <div class="rightBottom">
              <h2>
                <i class="iconfont icon-invoice-manage" />环境数据
              </h2>
              <right-bottom-six ref="rightBottomSix" :environment-obj="environmentObj" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { bgFun } from '../../../bg.js'
import allTitle from '../components/allTitle'
import leftEcharts from './components/leftEcharts'
import rightEchartsGauge from './components/rightEchartsGauge'
import rightBottomSix from './components/rightBottomSix'
import centerTopEcharts from './components/centerTopEcharts'
export default {
  name: 'EqMaintenance',
  components: {
    allTitle,
    leftEcharts,
    rightEchartsGauge,
    rightBottomSix,
    centerTopEcharts
  },
  data() {
    return {
      titleName: '智能仓储监控管理平台',
      obj: {},
      environmentObj: {},
      wmsName: ''
    }
  },
  computed: {
    ...mapGetters(['compInfo'])
  },
  created() {},
  async mounted() {
    const loading = this.$loading({
      lock: true,
      text: '数据加载中...', // 数据加载中...
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    setTimeout(async () => {
      loading.close()
      bgFun()
    }, 500)
    this.getInfo()
    /* 根据浏览器收缩echarts重铸 */
    window.onresize = () => {
      this.$refs['leftEcharts'].infoSize()
      this.$refs['rightEchartsGauge'].infoSize()
      this.$refs['centerTopEcharts'].infoSize()
    }
  },
  beforeDestroy() {},
  methods: {
    getInfo() {
      const loading = this.$loading({
        lock: true,
        text: '数据加载中...', // 数据加载中...
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(async () => {
        loading.close()
        await this.getWmsInfo()
        await this.getMaterialInfo()
        await this.getWmsNumChange()
        await this.getFireEnvironment()
      }, 1000)
    },
    /* 获取仓库信息 */
    async getWmsInfo() {
      const res = await this.$axios.get('/board/brain/wms/getWmsInfo')
      if (res?.data.code === 200) {
        this.wmsName = res.data.data ? res.data.data.wmsName : ''
        await this.$refs['centerTopEcharts'].setTreemapEcharts(res.data.data)
      }
    },
    /* 获取物料信息 */
    async getMaterialInfo() {
      const res = await this.$axios.get('/board/brain/wms/getMaterialInfo')
      if (res?.data.code === 200) {
        this.obj = res.data.data
      }
    },
    /* 获取库位数据 */
    async getWmsNumChange() {
      const res = await this.$axios.get('/board/brain/wms/getWmsNumChange')
      if (res?.data.code === 200) {
        await this.$refs['leftEcharts'].setLocationEcharts(res.data.data)
      }
    },
    /* 获取消防情况和环境数据 */
    async getFireEnvironment() {
      const res = await this.$axios.get('/board/brain/wms/getFireEnvironment')
      if (res?.data.code === 200) {
        this.environmentObj = res.data.data
        await this.$refs['rightEchartsGauge'].getInfo(res.data.data)
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.mes-container {
  position: fixed;
  z-index: 999999 !important;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  // background: radial-gradient(hwb(221 0% 34%) 20%, #001439 70%);
  background: url(../../../assets/images/kb01/kbbg01.jpg) no-repeat;
  background-size: 100% 100%;
  min-width: 1100px;
  min-height: 620px;
  .containerBox {
    position: relative;
    height: 100%;
    /* 中间样式 */
    .contentBox {
      position: absolute;
      top: 70px;
      height: calc(100% - 70px);
      width: 100%;
      padding: 10px;
      .allBox {
        margin: 10px;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        h1 {
          border-bottom: 1px solid rgba(104, 129, 229, 0.8);
          margin: 0 5px;
          background: linear-gradient(to bottom, #f5f5f5, #1eb6fe);
          -webkit-background-clip: text;
          color: transparent;
          height: 50px;
          line-height: 50px;
          font-size: 25px;
          i {
            margin-right: 10px;
            font-size: 25px;
          }
        }
        h2 {
          background: linear-gradient(to bottom, #f5f5f5, #1eb6fe);
          -webkit-background-clip: text;
          color: transparent;
          font-weight: normal;
          font-size: 20px;
          margin: 0;
          padding-left: 10px;
          i {
            margin-right: 5px;
            font-size: 18px;
          }
          height: 40px;
          line-height: 40px;
        }
      }
      .leftBox {
        width: 25%;
        height: 100%;
        .leftBg {
          background: url(../../../assets/images/kuanBig.png) no-repeat;
          background-size: 100% 100%;
        }
        .leftTopBox {
          height: calc(60% - 50px);
          ul {
            height: 100%;
            padding: 0 5px;
            li {
              color: #fff;
              height: 18%;
              border-bottom: 1px solid rgba(104, 129, 229, 0.8);
              span {
                width: 50%;
                float: left;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%;
                i {
                  background: linear-gradient(to bottom, #f5f5f5, #1eb6fe);
                  -webkit-background-clip: text;
                  color: transparent;
                  font-size: 18px;
                  margin-right: 5px;
                }
              }
              b {
                width: 50%;
                height: 100%;
                float: left;
                background: linear-gradient(to bottom, #f5f5f5, #1eb6fe);
                -webkit-background-clip: text;
                color: transparent;
                display: flex;
                justify-content: left;
                align-items: center;
                font-size: 24px;
              }
            }
          }
        }
        .leftBottomEcharts {
          height: 40%;
        }
      }
      .centerBox {
        width: 50%;
        height: 100%;
        .centerTop {
          height: 70%;
          .centerTopBg {
            height: 100%;
            background: url(../../../assets/images/kuanBig3.png) no-repeat;
            background-size: 100% 100%;
          }
          .centerTopTitle {
            height: 50px;
            color: #fff;
            padding: 20px 40px 0 40px;
            position: relative;
            span {
              font-size: 25px;
            }
            ul {
              position: absolute;
              top: 5px;
              right: 20px;
              width: 200px;
              height: 50px;
              line-height: 50px;
              li {
                float: left;
                width: 66.66;
                .blue {
                  color: #1eb6fe;
                }
                .green {
                  color: #04cf48;
                }
                .yellow {
                  color: #cf3d04;
                }
                span {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 20px;
                  height: 100%;
                  float: left;
                  padding-right: 5px;
                }
                b {
                  width: 44px;
                  float: left;
                  font-weight: normal;
                }
              }
            }
          }
        }
        .centerBottom {
          height: 25%;
          .centerBottomBg {
            height: 100%;
            background: url(../../../assets/images/center02.png) no-repeat;
            background-size: 100% 100%;
          }
        }
      }
      .rightBox {
        width: 25%;
        height: 100%;
        .rightBg {
          background: url(../../../assets/images/kuanBig2.png) no-repeat;
          background-size: 100% 100%;
        }
        .rightTop {
          height: calc(30% - 50px);
          .rightTopContent {
            height: calc(100% - 40px);
            padding: 10px 8px;
            img {
              width: 50%;
              height: auto;
            }
          }
        }
        .rightBottom {
          height: 70%;
        }
      }
    }
  }
}
</style>
